<template>
  <canvas :id="canvasId" :width="width" :height="height"></canvas>
</template>
<script>
export default {
  name: 'drawRing',
  data () {
    return {
      canvas: '',
      ctx: '',
      totalValue: ''
    }
  },
  props: {
    canvasId: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: ''
    },
    height: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'ring' // 圆环ring 柱状图bar 折线图 line 饼状pie
    },
    data: { // 存放图表数据
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      required: false
    }
  },
  mounted () {
    this.sChart(this.canvasId, this.type, this.data, this.options)
  },
  methods: {
    sChart: function (canvas, type, data, options) {
      this.canvas = document.getElementById(canvas)
      this.ctx = this.canvas.getContext('2d')
      this.type = type
      this.data = data // 存放图表数据
      this.dataLength = this.data.length // 图表数据的长度
      this.totalValue = this.getTotalValue() // 获取饼图数据总和
      this.init(options)
    },
    init: function (options) {
      if (this.dataLength === 0) {
        return false
      }
      if (options) {
        for (let key in options) {
          if (key === 'colorList' && Array.isArray(options[key])) {
            this[key] = options[key].concat(this[key])
          } else {
            this[key] = options[key]
          }
        }
      }
      this.drawPieUpdate()
    },
    drawPieUpdate: function () {
      this.ctx.fillStyle = this.bgColor
      this.ctx.fillRect(0, 0, this.width, this.height)
      this.drawPieChart()
    },
    drawPieChart: function () {
      let x = this.width / 2
      let y = this.height / 2
      for (let i = 0; i < this.dataLength; i++) {
        this.ctx.beginPath()
        this.ctx.fillStyle = this.colorList[i]
        this.ctx.moveTo(x, y)
        this.data[i].start = i === 0 ? -Math.PI / 2 : this.data[i - 1].end
        this.data[i].end = this.data[i].start + this.data[i].value / this.totalValue * 2 * Math.PI
        // 绘制扇形
        this.ctx.arc(x, y, this.radius, this.data[i].start, this.data[i].end)
        this.ctx.closePath()
        this.ctx.fill()

        this.data[i].middle = (this.data[i].start + this.data[i].end) / 2
        this.ctx.strokeStyle = this.colorList[i]
      }
      // 如果类型是环形图，绘制一个内圆
      if (this.type === 'ring') {
        this.ctx.beginPath()
        this.ctx.fillStyle = this.bgColor
        this.ctx.arc(x, y, this.innerRadius, 0, Math.PI * 2)
        this.ctx.fill()
      }
    },
    getTotalValue () {
      let total = 0
      for (let i = 0; i < this.dataLength; i++) {
        total += this.data[i].value
      }
      return total
    }
  }
}
</script>
